<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="school.name">
        <div>{{school.name}}</div>
        <div>{{school.age}}</div>
        {{getNewName}}
        <ul>
            <li>1</li>
            <li>1</li>
        </ul>
        <div v-html="message"></div>
        <button v-on:click='change'>更新操作</button>
    </div>
    <script src="./MVVM.js"></script>
    <script>
        let btn = document.querySelector("button");
        let vm = new Vue({
            el:'#app',
            data:{
                school:{
                    name:'孙红岩',
                    age:'18'
                },
                message:'<h1>每个不曾起舞的日子都是对生命的辜负</h1>'
            },
            computed: {
                getNewName(){
                    return this.school.name + ' 加油'
                }
            },
            methods:{
                change(){
                    this.school.name = '越努力越幸运'
                }
            }
        })
    </script>
</body>
</html>